<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div class="row-fluid" style="padding-bottom: 50px; max-height: 2000px;">

	<div class="span11 span11div">
		<div class="controls">
			<div class="row-fluid"
				style="height: 50px; background-color: #8466C2;">

				<div class="controls pull-left" style="width: 300px">
					<label
						style="font-size: 30px; line-height: 50px; margin-left: 30px; color: white; width: 300px">MENU</label>
				</div>
			</div>
			<div class="controls" style="padding-top: 20px">
				<div class="row-fluid">
					<div class="span4" style="margin-left: 8px">
						<div class="item">
							<div class="item-image" style="max-height: 260px">
								<img style="width: 300px; height: 250px"
									src="resources/images/paschino_product.jpg">
							</div>
						</div>						
						<div class="controls-row">
							<div class="controls">
								<label class="menucategorytitle">Frappuccino</label> <label
									class="menupricetitle">29.000 VND</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">__
									_________ __</label> 
									
								<label class="menugroupproducttitle">Iced
									Blended</label> <label class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ ___________ _</label>
							</div>							
							<div class="controls" style="padding-top: 10px; width: 300px">
							
							<c:forEach items="${listAllProducts }" var="listAllProducts">
							<c:if test="${listAllProducts.categoryId.id == 1}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right">
										<fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> <label
										class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>
								<div class="controls-row">

									<label class="menuproductdetail "
										style="font-weight: bold; text-align: center; padding-top: 10px; font-size: 11px">Flavor:
										vanilla, hazelnut, mint, caramel, chocolate</label> <label
										class="menupricetitle"
										style="padding: 0px; font-weight: normal; font-size: 16px">__
										__________ __</label>
								</div>
							</div>
						</div>
							
					</div>
					<div class="span4" style="margin-left: 10px">
						<div class="item">
							<div class="item-image" style="max-height: 260px">


								<img style="width: 300px; height: 250px"
									src="resources/images/fruitchiller_product.jpg">

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">
								<label class="menucategorytitle">Raspberry FruitChiller</label>
								<label class="menupricetitle">36.000 VND</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">__
									_________ __</label> <label class="menugroupproducttitle">Fruit
									Chiller</label> <label class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ ___________ _</label>
							</div>
							<div class="controls" style="padding-top: 10px; width: 300px">
							<c:forEach items="${listAllProducts }" var="listAllProducts">
							<c:if test="${listAllProducts.categoryId.id == 2}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> <label
										class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>
								

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">

								<label class="menugroupproducttitle">Hot & Iced tea</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ _____________ _</label>
							</div>
							<div class="controls" style="padding-top: 10px; width: 300px">
								<c:forEach items="${listAllProducts }" var="listAllProducts">
							<c:if test="${listAllProducts.categoryId.id == 5}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> 								
								</div>
								</c:if>
							</c:forEach>
							</div>
						</div>

					</div>
					<div class="span4" style="margin-left: 10px">
						<div class="item">
							<div class="item-image" style="max-height: 260px">


								<img style="width: 300px; height: 250px"
									src="resources/images/soda_product.jpg">

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">
								<label class="menucategorytitle">Strawberry Icecream Tea</label>
								<label class="menupricetitle">36.000 VND</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">__
									_________ __</label> <label class="menugroupproducttitle">Fruit
									Iced Tea</label> <label class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ _____________ _</label>
							</div>
							<div class="controls" style="padding-top: 10px; width: 300px">
								<c:forEach items="${listAllProducts }" var="listAllProducts">
								<c:if test="${listAllProducts.categoryId.id == 3}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> <label
										class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">

								<label class="menugroupproducttitle">Fruit Iced Soda</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ _____________ _</label>
							</div>
							<div class="controls" style="padding-top: 10px; width: 300px">
										<c:forEach items="${listAllProducts }" var="listAllProducts">
								<c:if test="${listAllProducts.categoryId.id == 4}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> <label
										class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>
								<div class="controls-row">

									<label class="menupricetitle"
										style="padding: 0px; font-weight: normal; font-size: 16px;">__
										__________ __</label>
								</div>
							</div>
						</div>


					</div>

				</div>
				<hr
					style="width: 800px; height: 1px; background-color: #5EC4B6; margin-left: auto; margin-right: auto;">
				<div class="row-fluid" style="padding-top: 20px">
					<div class="span4" style="margin-left: 8px">
						<div class="item">
							<div class="item-image" style="max-height: 260px">


								<img style="width: 300px; height: 250px"
									src="resources/images/cappu_product.jpg">

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">
								<label class="menucategorytitle">Cappuccino</label> <label
									class="menupricetitle">30.000 VND</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">__
									_________ __</label> <label class="menugroupproducttitle">Coffee</label>
								<label class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ _______ _</label>
							</div>
							<div class="controls" style="margin-top: -5px">

								<label class="pull-right menuproducttitle"
									style="font-weight: normal; font-family: arial">ICED</label> <label
									class="pull-right menuproducttitle"
									style="margin-right: 30px; font-weight: normal; font-family: arial">HOT</label>
							</div>
							<div class="controls" style="padding-top: 15px; width: 300px">
							
									<c:forEach items="${listAllProducts }" var="listAllProducts">
								<c:if test="${listAllProducts.categoryId.id == 6}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> 									 
									<label class="menuproductprice hotcoffee"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.hotprice }" /></label>
									<label class="menuproductprice icedcoffee"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label>
									<label class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>								
								<div class="controls-row">

									<label class="menuproductdetail "
										style="font-weight: bold; text-align: center; padding-top: 10px; font-size: 11px">Flavor:
										vanilla, hazelnut, mint, caramel, chocolate</label>
									<!--                                                <label class="menupricetitle" style="padding: 0px; font-weight: normal; font-size: 16px">__ __________ __</label>-->
								</div>
							</div>
						</div>

					</div>
					<div class="span4" style="margin-left: 10px">
						<div class="item">
							<div class="item-image" style="max-height: 260px">


								<img style="width: 300px; height: 250px"
									src="resources/images/sandwich_product.jpg">

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">
								<label class="menucategorytitle">Panini & Sandwich</label> <label
									class="menupricetitle">32.000 VND</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">__
									_________ __</label> <label class="menugroupproducttitle">Italian
									Panini</label> <label class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ ___________ _</label>
							</div>
							<div class="controls" style="padding-top: 10px; width: 300px">
									<c:forEach items="${listAllProducts }" var="listAllProducts">
								<c:if test="${listAllProducts.categoryId.id == 7}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> <label
										class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">

								<label class="menugroupproducttitle">Sandwich</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ ________ _</label>
							</div>
							<div class="controls" style="padding-top: 10px; width: 300px">
									<c:forEach items="${listAllProducts }" var="listAllProducts">
								<c:if test="${listAllProducts.categoryId.id == 9}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> <label
										class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>


							</div>
						</div>

					</div>
					<div class="span4" style="margin-left: 10px">
						<div class="item">
							<div class="item-image" style="max-height: 260px">


								<img style="width: 300px; height: 250px"
									src="resources/images/cookies_product.jpg">

							</div>
						</div>
						<div class="controls-row">
							<div class="controls">
								<label class="menucategorytitle">Cookies Cream</label> <label
									class="menupricetitle">36.000 VND</label> <label
									class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">__
									_________ __</label> <label class="menugroupproducttitle">Cake</label>
								<label class="menupricetitle"
									style="padding: 0px; margin-top: -22px; font-weight: 100; font-size: 16px">
									_ ______ _</label>
							</div>
							<div class="controls" style="padding-top: 10px; width: 300px">
									<c:forEach items="${listAllProducts }" var="listAllProducts">
								<c:if test="${listAllProducts.categoryId.id == 8}">
								<div class="controls-row">
									<label class="menuproducttitle">${listAllProducts.name }</label> <label
										class="menuproductprice pull-right"><fmt:formatNumber type="number" pattern="###,###" value="${listAllProducts.price }" /></label> <label
										class="menuproductdetail pull-left">${listAllProducts.description }</label>
								</div>
								</c:if>

							</c:forEach>

							</div>
						</div>



					</div>

				</div>
<%-- 				</c:forEach> --%>
			</div>

		</div>
	</div>
</div>
